<!doctype html>
<html style="height:100%;">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Test</title>
    <script type="text/javascript" language="javascript" src="me.l1k3.app.ui.layout.demo.DemoLayout/me.l1k3.app.ui.layout.demo.DemoLayout.nocache.js"></script>
  	<style>
  		body {
  			padding:0 !important;
  			margin:0 !important;
  			height:100% !important;
  			width:100% !important;
  			overflow:hidden !important;
  			background-color: #555 !important;
  		}
  		#root {
  			visibility:hidden;
  			position:absolute;
  			top:20%;
  			left:20%;
  			width:60%;
  			height:60%;
  		}
  		#toolbar {
  			bottom:0;
  			position:absolute;
  			z-index:400;
  		}
  		.overflow {
  			overflow:hidden;
  		}
  		.center {
  			position:absolute;
  			top:0px;
  			left:0px;
  			width:100%;
  			height:100%;
			background-color: #FFF;
  		}
  		.inside {
  			float:left;
  			display:block;
  			position: absolute;
  			z-index: 100;
  			font-size:200%;
  			white-space:nowrap;
  			opacity: 0.4;
  		}
  		.label {
  			float:left;
  			display:block;
  			position: absolute;
  			font-size:100%;
  			color: white;
  			background-color:green;
  			z-index: 101;
  			white-space:nowrap;
  			padding: 0px 2px;
  		}
  		#center .inside {
  			opacity: 1.0;
  			z-index: 200;
  		}
  		#center .label {
  			opacity: 1.0;
  			background-color:blue;
  			z-index: 201;
  		}
  	</style>
  </head>
  <body>
  	<div id="toolbar"></div>
  	<div id="root">
	  	<div id="center" class="center">
	  		<span id="fox" class="inside"><img src="images/visualfox2_128x128x32.png" width="128" height="128"></span>
	  		<span id="foxlabel" class="label">OH HI!</span>
	  	</div>
	  	<div id="top" class="center">
	  		<span class="inside"><img src="images/visualfox2_128x128x32.png" width="128" height="128"></span>
	  		<span class="label">TOP</span>
	  	</div>
	  	<div id="bottom" class="center">
	  		<span class="inside"><img src="images/visualfox2_128x128x32.png" width="128" height="128"></span>
	  		<span class="label">BOTTOM</span>
	  	</div>
	  	<div id="right" class="center">
	  		<span class="inside"><img src="images/visualfox2_128x128x32.png" width="128" height="128"></span>
	  		<span class="label">RIGHT</span>
	  	</div>
	  	<div id="left" class="center">
	  		<span class="inside"><img src="images/visualfox2_128x128x32.png" width="128" height="128"></span>
	  		<span class="label">LEFT</span>
	  	</div>
	  	
	  	<div id="topleft" class="center">
	  		<span class="inside"><img src="images/visualfox2_128x128x32.png" width="128" height="128"></span>
	  		<span class="label">TOP-LEFT</span>
	  	</div>
	  	<div id="topright" class="center">
	  		<span class="inside"><img src="images/visualfox2_128x128x32.png" width="128" height="128"></span>
	  		<span class="label">TOP-RIGHT</span>
	  	</div>
	  	<div id="bottomright" class="center">
	  		<span class="inside"><img src="images/visualfox2_128x128x32.png" width="128" height="128"></span>
	  		<span class="label">BOTTOM-RIGHT</span>
	  	</div>
	  	<div id="bottomleft" class="center">
	  		<span class="inside"><img src="images/visualfox2_128x128x32.png" width="128" height="128"></span>
	  		<span class="label">BOTTOM-LEFT</span>
	  	</div>
  	</div>
  </body>
</html>